<template>
	<view class="my-order" ref="container">
		<view class="Statistics">
			<view class="top">
				<view class="privilege">
					<view class="icon">
						<image src="https://h5.ylsp.vip/file/static/index-06.png" mode=""></image>
					</view>
					<view class="privilegeTitle">
						直通车名额：{{ totalCount }}
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="td">
					<view class="span">
						{{ payThroughCount }}
					</view>
					<view class="text">
						累计购买次数
					</view>
				</view>
				<view class="td">
					<view class="span">
						{{ authThroughCount }}
					</view>
					<view class="text">
						名额使用次数
					</view>
				</view>
			</view>
			<!-- <view class="search">
				<view class="uni-input">
					<input type="text" value="" placeholder="搜索" />
					<text class="icon iconfont icon-sousuo" @click="submitForm"></text>
				</view>
				<view class="column">
					<picker class="btn" :range="years" @change="yearChange">
						选择分类
					</picker>
				</view>
			</view> -->
		</view>

		<view class="nav acea-row row-around">
			<view class="item" :class="type == 0 ? 'on' : ''" @click="changeType(0)">
				<view>购买记录</view>
			</view>
			<view class="item" :class="type == 1 ? 'on' : ''" @click="changeType(1)">
				<view>使用记录</view>
			</view>
		</view>
		<view v-if="type == 0">
			<view class="list">
				<view class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
					<view class="title acea-row row-between-wrapper">
						<view class="acea-row row-middle">
							{{ order.createTime }}
						</view>
					</view>
					<view v-for="(cart,cartInfoIndex) in order.cartInfo" :key="cartInfoIndex">
						<view class="item-info acea-row row-between row-top">
							<view class="pictrue">
								<image :src="cart.productInfo.image" />
							</view>
							<view class="text acea-row row-between">
								<view class="name line2">{{ cart.productInfo.storeName }}</view>
								<view class="money">
									<view class="pic-number">
										￥{{
									cart.productInfo.attrInfo
									? cart.productInfo.attrInfo.price
									: cart.productInfo.price
									}}
									</view>
									<view class="pic-span">x{{ cart.cartNum }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="totalPrice">
						共{{ order.cartInfo.length || 0 }}件商品，总金额
						<text class="money font-color-red">￥{{ order.payPrice }}</text>
					</view>
				</view>
			</view>
			<view class="noCart" v-if="orderList.length <= 0">
				<view class="pictrue">
					<image src="https://h5.ylsp.vip/file/static/record-bg.png" />
				</view>
			</view>
		</view>
		<view v-if="type == 1">
			<view class="list">
				<view class="item" v-for="(user,userListIndex) in userList" :key="userListIndex">
					<view class="title acea-row row-between-wrapper">
						<view class="acea-row row-middle">
							用户ID：{{user.uid}}
						</view>
					</view>
					<view>
						<view class="item-info acea-row row-between row-top">
							<view class="pictrue">
								<image :src="user.avatar" />
							</view>
							<view class="text acea-row row-between">
								<view class="name line2">{{ user.authRemark }}</view>
							</view>
						</view>
					</view>
					<view class="totalPrice">
						{{ user.authDate }}
					</view>
				</view>
			</view>
			<view class="noCart" v-if="userList.length <= 0">
				<view class="pictrue">
					<image src="https://h5.ylsp.vip/file/static/record-bg.png" />
				</view>
			</view>
		</view>
		<Loading :loaded="loaded" :loading="loading"></Loading>
	</view>
</template>
<script>
	import Loading from "@/components/Loading";
	import {
		isWeixin,
	} from "@/utils";
	import {
		getThroughList
	} from "@/api/order";
	const NAME = "privilegeDetails";
	export default {
		name: NAME,
		data() {
			return {
				years: ["购买记录", "名额使用记录"],
				yearsIndex: 0,
				type: "",
				throughType: 0,
				authThroughCount: 0,
				payThroughCount: 0,
				totalCount: 0,
				orderList: [],
				userList: [],
				page: 1,
				limit: 10,
				loaded: false,
				loading: false,
				loadTitle: ''
			};
		},
		components: {
			Loading
		},
		onShow: function() {
			this.getThroughList()
		},
		methods: {
			yearChange: function(e) {
				console.log(e.detail.value)
			},
			getThroughList() {
				if (this.loading || this.loaded) return;
				this.loading = true;
				const {
					page,
					limit,
					throughType
				} = this;
				getThroughList({
					page,
					limit,
					throughType
				}).then(res => {
					this.loading = false;
					this.orderList = this.orderList.concat(res.data.throughList);
					this.userList = this.userList.concat(res.data.userThroughList);
					this.authThroughCount = res.data.authThroughCount;
					this.payThroughCount = res.data.payThroughCount;
					this.totalCount = res.data.totalCount;
					this.loaded = res.data.throughList.length < this.limit;
					this.loadTitle = this.loaded ? "人家是有底线的" : "上拉加载更多";
					console.log(res.data)
				});
			},
			changeType(type) {
				this.type = type;
				this.orderList = [];
				this.userList = [];
				this.page = 1;
				this.loaded = false;
				this.loading = false;
				this.getThroughList();
			},

		},
		onReachBottom() {
			!this.loading && this.getThroughList();
		}
	};
</script>

<style lang="less">
	page {
		background: #F7F7F7;
	}

	.my-order .nav {
		position: fixed;
		top: 260rpx;
		background: #F7F7F7 !important;
	}

	.my-order .nav .item {
		position: relative;

	}

	.my-order .nav .item.on::after {
		height: 7rpx;
		width: 50rpx;
		border-radius: 5rpx;
		background: -webkit-linear-gradient(to left, #ff424c, #faa159);
		/* Safari 5.1-6.0 */
		background: -o-linear-gradient(to left, #ff424c, #faa159);
		/* Opera 11.1-12.0 */
		background: -moz-linear-gradient(to left, #ff424c, #faa159);
		/* Firefox 3.6-15 */
		background: linear-gradient(to left, #ff424c, #faa159);
		/* 标准语法 */
		position: absolute;
		content: '';
		bottom: -35px;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.my-order .list {
		padding-top: 365rpx;
	}

	.Statistics {
		box-sizing: border-box;
		border-radius: 10rpx;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;



		.search {
			background-color: #FFFFFF;
			height: 100rpx;
			width: 100%;
			z-index: 2;

			.uni-input {
				width: 77%;
				float: left;
				position: relative;
				padding: 15rpx 20rpx 0 20rpx;
				box-sizing: border-box;

				input {
					width: 100%;
					height: 70rpx;
					border-radius: 35rpx;
					background-color: #f7f7f7;
					border: none;
					padding-left: 30rpx;
					font-size: 28rpx;
					color: #999999;
				}

				.icon {
					position: absolute;
					top: 30rpx;
					right: 45rpx;
					color: #999999;
				}
			}

			.column {
				width: 23%;
				float: left;
				box-sizing: border-box;
				padding: 15rpx 15rpx 0 0;

				.btn {
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 20rpx;
					border-radius: 35rpx;
					text-align: center;
					color: #ffffff;
					background-color: #fc5531;
					font-size: 26rpx;
				}
			}
		}

		.top {
			background-color: #222222;
			width: 100%;
			position: relative;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;

			.privilege {
				position: relative;
				height: 100rpx;
				width: 100%;
				background-image: url('https://h5.ylsp.vip/file/static/index-05.png');
				background-size: 100% 100%;

				.icon {
					height: 60rpx;
					width: 60rpx;
					margin-top: 20rpx;
					margin-left: 30rpx;
					float: left;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.privilegeTitle {
					margin-left: 30rpx;
					float: left;
					height: 100rpx;
					line-height: 100rpx;
					color: #222222;
					font-size: 30rpx;
				}

				.btnDetails {
					position: absolute;
					right: 50rpx;
					top: 20rpx;
					height: 60rpx;
					width: auto;
					padding: 0 30rpx;
					line-height: 60rpx;
					border-radius: 60rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					background: -webkit-linear-gradient(to left, #ff424c, #faa159);
					/* Safari 5.1-6.0 */
					background: -o-linear-gradient(to left, #ff424c, #faa159);
					/* Opera 11.1-12.0 */
					background: -moz-linear-gradient(to left, #ff424c, #faa159);
					/* Firefox 3.6-15 */
					background: linear-gradient(to left, #ff424c, #faa159);
					/* 标准语法 */
				}
			}

			.bgbox {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background-image: url('https://h5.ylsp.vip/file/static/images/accountBg.png');
				background-size: 100% 100%;
			}

			.title {
				font-size: 36rpx;
				color: #FFFFFF;
				padding: 30rpx 0 0 30rpx;
			}

			.store {
				font-size: 50rpx;
				color: #FFFFFF;
				padding: 20rpx 0 0 30rpx;
			}

			.group {
				font-size: 30rpx;
				color: #FFFFFF;
				padding: 10rpx 0 0 30rpx;
			}

			.total {
				font-size: 30rpx;
				color: #FFFFFF;
				padding: 10rpx 0 30rpx 30rpx;
			}
		}

		.bottom {
			height: 160rpx;
			width: 100%;
			display: table;
			table-layout: fixed;
			border-radius: 10rpx;
			background-color: #FFFFFF;
		}

		.td {
			position: relative;
			display: table-cell;
			text-align: center;
			vertical-align: middle;

			.span {
				text-align: center;
				font-size: 40rpx;
				font-weight: 900;
			}

			.text {
				text-align: center;
				font-size: 26rpx;
				color: #666;
				padding-top: 26rpx;
			}
		}

		.td:nth-child(1)::before {
			position: absolute;
			content: '';
			height: 40rpx;
			width: 1rpx;
			border-right: #666 solid 2rpx;
			right: 0;
			bottom: 20rpx;
		}
	}

	.noCart {
		margin-top: 0.17 * 100rpx;
		padding-top: 0.1 * 100rpx;

		.pictrue {
			width: 4 * 100rpx;
			height: 4 * 100rpx;
			overflow: hidden;
			margin: 0.7 * 100rpx auto 0.5 * 100rpx auto;

			image {
				width: 4 * 100rpx;
				height: 4 * 100rpx;
			}
		}
	}
</style>
